<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn button {
            width: 150px;
            height: 45px;
            font-size: 18px;
            color: teal;
            font-weight: bold;
            background: rgba(28, 107, 107, 0.349);
            border: 2px solid teal;

            cursor: pointer;
        }

        button:active {
            background: rgba(8, 88, 88, 0.5);
            transform: translateY(-1px);
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>

    <div class="btn">
        <button class="btn1">加速药水1</button>
        <button class="btn2">加速药水2</button>
        <button class="btn3">加速药水3</button>
        <button class="btn4">起飞</button>
    </div>




    <script>
        // img	规定要使用的图像、画布或视频。	 
        // sx	可选。开始剪切的 x 坐标位置。
        // sy	可选。开始剪切的 y 坐标位置。
        // swidth	可选。被剪切图像的宽度。
        // sheight	可选。被剪切图像的高度。
        // x	在画布上放置图像的 x 坐标位置。
        // y	在画布上放置图像的 y 坐标位置。
        // width	可选。要使用的图像的宽度（伸展或缩小图像）。
        // height	可选。要使用的图像的高度（伸展或缩小图像）。

        var Mycanvas = document.querySelector("#canvas");
        Mycanvas.width = 600;
        Mycanvas.height = 600;
        Mycanvas.style.border = "2px solid #ccc";

        var btn = document.querySelector(".btn");

        var ctx = Mycanvas.getContext("2d");

        var img = new Image();
        img.src = "./imgs/ban.png";

        /* 放在onlad方法中，为了防止图片还未完整获取就开始绘画 */
        img.onload = function () {
            var i = 0; /* i控制人物走动的姿势 */
            var j = 0; /* j控制人物的方向 */
            var p1 = 0; /* 左右 */
            var p2 = 0; /* 上下 */
            var p = 2; /* 设置默认步长 */
            var time = 200; /* 设置默认速度 */
            var clear = null; /* 先声明定时器变量以及附上空值，用于后面改动 */


            /* 功能按钮 */
            btn.onclick = function (e) {
                if (e.target.className == "btn1") {
                    p = 3;
                    time = 150;
                } else if (e.target.className == "btn2") {
                    p = 4;
                    time = 100;
                } else if (e.target.className == "btn3") {
                    p = 5;
                    time = 80;
                } else if (e.target.className == "btn4") {
                    p = 15;
                    time = 20;
                }
            }


            /* 人物默认在左上角开始 */
            ctx.drawImage(img, 0, 0, 40, 65, 0, 0, 40, 65);


            var flag = true;
            document.onkeydown = function (e) {

                /* 键盘的上下左右键 j改变人物走动的方向， p1和p2控制人物前后走动 */
                if (e.keyCode == 37) {
                    p1 -= p;
                    j = 1;
                } else if (e.keyCode == 38) {
                    p2 -= p;
                    j = 3;
                } else if (e.keyCode == 39) {
                    p1 += p;
                    j = 2;
                } else if (e.keyCode == 40) {
                    p2 += p;
                    j = 0;
                }


                /* 添加定时器，让人物有走动的效果 */
                if (e.keyCode === 37 || e.keyCode === 38 || e.keyCode === 39 || e.keyCode === 40) {
                    if (flag) {
                        flag = false;
                        clear = setInterval(function () {
                            i %= 4;
                            ctx.fillStyle = "#fff";
                            ctx.fillRect(0, 0, 600, 600);
                            ctx.drawImage(img, i * 40, j * 65, 40, 65, p1, p2, 40, 65);
                            i++;

                        }, time);
                    }
                }



                /* 抬起的时候清除定时器，让人物停留在最后一帧 */
                document.onkeyup = function (e) {
                    flag = true;
                    if (e.keyCode === 37 || e.keyCode === 38 || e.keyCode === 39 || e.keyCode === 40) {
                        clearInterval(clear);
                        ctx.fillRect(0, 0, 600, 600);
                        ctx.drawImage(img, 0, j * 65, 40, 65, p1, p2, 40, 65);
                    }
                }




                /* 控制人物走动范围 */
                if (p1 > 600) {
                    p1 = -40;
                } else if (p2 > 600) {
                    p2 = -65;
                } else if (p1 < -40) {
                    p1 = 600;
                } else if (p2 < -65) {
                    p2 = 600;
                }

            }

        }

    </script>
</body>

</html>